<template>
  <el-card class="table-card">
    <div slot="header">
      <h4>查看采购类型配置</h4>
    </div>
    <el-form class="purchase-form" size="mini" :model="purchaseForm" label-width="90px">
      <el-form-item label="发起原因：">
        <el-input disabled :rows="1" type="textarea" :value="purchaseForm.reason" />
      </el-form-item>
    </el-form>
    <el-row>
      <SkusTable
        :showActionCol="false"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :dataSource="tableInfo.list"
      />
    </el-row>
  </el-card>
</template>
<script>
import SkusTable from '@/components/skusTable'
import { VIEW_TABLE_CLOUMNS } from './constants'
import { queryConfigDetailByRecordService } from '@/api/sourcing/purchaseType'

export default {
  components: {
    SkusTable,
  },
  data () {
    return {
      purchaseForm: {
        reason: ''
      },
      tableInfo: {
        loading: false,
        list: [],
        columns: VIEW_TABLE_CLOUMNS
      },
    };
  },
  mounted () {
    this.initTableData();
  },
  methods: {
    // 初始化表格数据
    initTableData () {
      const { auditRecordId } = this.$route.query
      if (auditRecordId) {
        this.getTableDataByRecordId(auditRecordId)
      }
    },
    // 获取表格数据通过单据号
    async getTableDataByRecordId (auditRecordId) {
      const res = await queryConfigDetailByRecordService(
        { auditRecordId },
        state => { this.tableInfo.loading = state }
      )
      if (res?.data) {
        const { remark, dataList } = res.data
        this.tableInfo.list = dataList
        this.purchaseForm.reason = remark
      }
    },
  }
};
</script>
<style scoped>
.purchase-form .el-form-item {
  margin-bottom: 0px;
}
</style>
